<template>
  <el-button @click="clearFilter">重置所有筛选</el-button>
  <el-table ref="tableRef" :data="tableData" style="width: 100%">
    <el-table-column type="expand" prop="desc,img_path">
      <template #default="scope">
        <div m="4">
          <span m="t-0 b-2" style="font-size: x-large; display: block;">投诉描述: {{ scope.row.desc }}</span>
          <img :src="scope.row.img_path" style="height: 150px; width: 150px;" :style="scope.row.imgVisible">
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="Date" sortable width="180" column-key="date" />
    <el-table-column prop="complaintType" label="投诉原因" :formatter="formatter" />
    <el-table-column prop="result" label="处理结果" width="180" />
    <el-table-column prop="tag" label="处理状态" width="100" :filters="[
      { text: '已处理', value: '已处理' },
      { text: '未处理', value: '未处理' },
      { text: '已评价', value: '已评价' },
    ]" :filter-method="filterTag" filter-placement="bottom-end">
      <template #default="scope">
        <el-tag :type="scope.row.tag === '已处理' ? '' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="right" prop="isSolved">
      <template #default="scope">
        <el-button size="large" type="success"
          :disabled="!tableData[scope.$index].isSolved || tableData[scope.$index].tag.includes('已评价')"
          @click="reply(scope.$index, scope.row)">回复</el-button>
        <el-button type="danger" size="large" :disabled="tableData[scope.$index].isSolved"
          @click.prevent="deleteRow(scope.$index, scope.row)">撤销</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="投诉确认">
    <el-form :model="form">
      <el-form-item label="您的改进意见" :label-width="formLabelWidth" style="justify-content: center;">
        <el-input v-model="form.reply" autocomplete="off" style="justify-content: center;" />
      </el-form-item>
    </el-form>
    <el-rate v-model="value" :texts="['极差', '差', '一般', '好', '非常好']" show-text allow-half />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="repliment(form.complaintsId)">
          确认
        </el-button>
        <el-button tpye="danger" @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script lang="ts" setup>

import { onMounted, ref } from 'vue'
import { valueEquals, type TableColumnCtx, type TableInstance } from 'element-plus'
import { reactive, computed } from 'vue';
import { postRequest } from '../../../api/axiosAPI';
import { deleteRequest } from '../../../api/axiosAPI';
import { getRequest } from '../../../api/axiosRequest';
import { useStore } from 'vuex'; // 导入vuex

interface User {
  isSolved: boolean
  complaintsId: string
  date: string
  complaintType: string
  tag: string
  desc: string
  result: string
  img_path: string
  imgVisible: string
}
//回复表单
const value = ref()
const now_index = ref()
const display = ref('')
const formLabelWidth = '140px'
const form = reactive({
  reply: '',
  complaintsId: '',
})
const dialogFormVisible = ref(false)
//表格数据
const tableData = ref([
  {
    isSolved: '',
    complaintsId: '',
    date: '',
    complaintType: '',
    tag: '',
    desc: '',
    result: '',
    img_path: '',
    imgVisible: '',
  },
])

const store = useStore();
//初始化用户个人处理记录
onMounted(async () => {
  // 获取存储在 store 中的 userId
  const userIds = computed(() => store.state.userId);
  console.log(typeof userIds);
  console.log(typeof userIds.value);
  console.log("Current User ID in another component:", userIds.value);

  // 1.通过游客id查询投诉的处理结果
  const result = await getRequest(`/complaints/getComplaintListByUserId?userId=${userIds.value}`)
  console.log(result);
  if (result.status === 200) {
    if (result.data.status === 1) {
      let tempData = result.data.data;
      let tempTag;

      // 2.遍历投诉信息列表
      for (let i = 0; i < tempData.length; i++) {
        let tempImgVisible = 'display:block';

        // 3.判断投诉处理状态
        if (tempData[i].isSolved === 0) {
          tempTag = '未处理';
        } else if (tempData[i].isSolved === 1) {
          tempTag = '已处理';
        } else {
          tempTag = '已评价';
        }

        // 4.判断图片是否存在,不存在，则不显示
        if (tempData[i].imgPath === '') {
          let tempImgVisible = 'display:none';
        }

        tableData.value[i] = {
          isSolved: tempData[i].isSolved,
          complaintsId: tempData[i].complaintId,
          date: tempData[i].date,
          complaintType: tempData[i].type,
          tag: tempTag,
          desc: tempData[i].description,
          result: tempData[i].result,
          img_path: tempData[i].imgPath,
          imgVisible: tempImgVisible
        }
      }
    }
  }

  // getRequest(`http://localhost:8022/api/complaints/?userId=${userIds.value}`, {
  //   userId: userIds.value,
  // })
  //   .then((response) => {
  //     if (response.status === 200) {
  //       console.log('请求成功')
  //       console.log(response.data.data)
  //       let tempData = response.data.data
  //       let tempTag
  //       for (let i = 0; i < tempData.length; i++) {
  //         let tempImgVisible = 'display:block'
  //         if (tempData[i].isSolved === 1) {
  //           tempTag = '已处理'
  //         }
  //         else if (tempData[i].isSolved === 0) {
  //           tempTag = '未处理'
  //         }
  //         else {
  //           tempTag = '已评价'
  //         }
  //         console.log('imgpath:' + typeof (tempData[i].imgPath))
  //         console.log('img is ' + tempData[i].imgPath)
  //         if (tempData[i].imgPath === '') {
  //           console.log('Into if');
  //           tempImgVisible = 'display:none'
  //         }
  //         console.log('图片是否可见' + tempImgVisible)
  //         tableData.value[i] = {
  //           isSolved: tempData[i].isSolved,
  //           complaintsId: tempData[i].complaintId,
  //           date: tempData[i].date,
  //           complaintType: tempData[i].type,
  //           desc: tempData[i].description,
  //           result: tempData[i].result,
  //           tag: tempTag,
  //           img_path: tempData[i].imgPath,
  //           imgVisible: tempImgVisible
  //         }
  //       }
  //     }
  //     else {
  //       console.log('Network Error!')
  //     }
  //   })
})
//撤销投诉,请求delete
const deleteRow = (index: number, row: User) => {
  if (window.confirm('请确认撤销操作')) {
    let complaintId = row.complaintsId
    console.log(tableData.value[index])
    tableData.value.splice(index, 1)
    deleteRequest(`http://localhost:8022/api/complaints/delete?complaintId=${complaintId}`, {
      complaintId: index.toString()
    })
      .then((response) => {
        if (response.status === 200) {
          console.log('撤销成功!')
        }
        else {
          console.log('Network Error!')
        }
      })
      .catch((error) => {
        console.log(error)
      })
  }
  else {
    window.alert('操作已取消')
  }
}
const tableRef = ref<TableInstance>()

// TODO: improvement typing when refactor table
//清除筛选列表
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  tableRef.value!.clearFilter()
}
//格式化输出
const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.complaintType
}
//处理状态筛选函数
const filterTag = (value: string, row: User) => {
  return row.tag === value
}
//弹出回复框  
const reply = (index: number, row: User) => {
  dialogFormVisible.value = true;
  console.log(row.complaintsId)
  form.complaintsId = row.complaintsId
  now_index.value = index
}
//回复投诉结果
const repliment = (complaintsId: string) => {
  console.log(complaintsId)
  dialogFormVisible.value = false
  tableData.value[now_index.value].tag = '已评价'
  console.log(value.value)
  postRequest(`http://localhost:8022/api/complaints/star?complaintId=${complaintsId}&star=${value.value}&comment=${form.reply}`)
    .then((response) => {
      if (response.status === 200) {
        console.log('post请求成功')
      }
      else {
        console.log('Network Error!')
      }
    })
    .catch((error) => {
      console.log(error)
    })
}

</script>

<style scoped>
.main {
  height: 100vh;
  overflow: hidden !important;
  padding: 0px;
}
</style>
